<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.22
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    <!-- CSS files -->
    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="page">
    <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                <a href="..">
                    <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
                </a>
            </h1>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item dropdown d-none d-md-flex me-3">
                    <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1"
                       aria-label="Show notifications">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/>
                            <path d="M9 17v1a3 3 0 0 0 6 0v-1"/>
                        </svg>
                        <span class="badge bg-red"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
                        <div class="card">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur
                                exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet
                                debitis et magni maxime necessitatibus ullam.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                       aria-label="Open user menu">
                        <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div>Paweł Kuna</div>
                            <div class="mt-1 small text-muted">UI Designer</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="#" class="dropdown-item">Set status</a>
                        <a href="#" class="dropdown-item">Profile & account</a>
                        <a href="#" class="dropdown-item">Feedback</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Settings</a>
                        <a href="#" class="dropdown-item">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar navbar-light">
                <div class="container-xl">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="../index.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12"/><path
                            d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
                            d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Home
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline
                            points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3"/><line x1="12" y1="12" x2="20"
                                                                                        y2="7.5"/><line x1="12" y1="12"
                                                                                                        x2="12"
                                                                                                        y2="21"/><line
                            x1="12" y1="12" x2="4" y2="7.5"/><line x1="16" y1="5.25" x2="8" y2="9.75"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Interface
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../empty.html">
                                            Empty page
                                        </a>
                                        <a class="dropdown-item" href="../accordion.html">
                                            Accordion
                                        </a>
                                        <a class="dropdown-item" href="../blank.html">
                                            Blank page
                                        </a>
                                        <a class="dropdown-item" href="../buttons.html">
                                            Buttons
                                        </a>
                                        <a class="dropdown-item" href="../cards.html">
                                            Cards
                                        </a>
                                        <a class="dropdown-item" href="../cards-masonry.html">
                                            Cards Masonry
                                        </a>
                                        <a class="dropdown-item" href="../colors.html">
                                            Colors
                                        </a>
                                        <a class="dropdown-item" href="../dropdowns.html">
                                            Dropdowns
                                        </a>
                                        <a class="dropdown-item" href="../icons.html">
                                            Icons
                                        </a>
                                        <a class="dropdown-item" href="../modals.html">
                                            Modals
                                        </a>
                                        <a class="dropdown-item" href="../maps.html">
                                            Maps
                                        </a>
                                        <a class="dropdown-item" href="../map-fullsize.html">
                                            Map fullsize
                                        </a>
                                        <a class="dropdown-item" href="../maps-vector.html">
                                            Vector maps
                                        </a>
                                        <a class="dropdown-item" href="../navigation.html">
                                            Navigation
                                        </a>
                                    </div>
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../charts.html">
                                            Charts
                                        </a>
                                        <a class="dropdown-item" href="../charts-heatmap.html">
                                            Charts heatmap
                                        </a>
                                        <a class="dropdown-item" href="../pagination.html">
                                            Pagination
                                        </a>
                                        <a class="dropdown-item" href="../skeleton.html">
                                            Skeleton
                                        </a>
                                        <a class="dropdown-item" href="../tabs.html">
                                            Tabs
                                        </a>
                                        <a class="dropdown-item" href="../tables.html">
                                            Tables
                                        </a>
                                        <a class="dropdown-item" href="../carousel.html">
                                            Carousel
                                        </a>
                                        <a class="dropdown-item" href="../lists.html">
                                            Lists
                                        </a>
                                        <a class="dropdown-item" href="../typography.html">
                                            Typography
                                        </a>
                                        <a class="dropdown-item" href="../page-headers.html">
                                            Page headers
                                        </a>
                                        <a class="dropdown-item" href="../markdown.html">
                                            Markdown
                                        </a>
                                        <div class="dropend">
                                            <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication"
                                               data-bs-toggle="dropdown" role="button" aria-expanded="false">
                                                Authentication
                                            </a>
                                            <div class="dropdown-menu">
                                                <a href="../sign-in.html" class="dropdown-item">Sign in</a>
                                                <a href="../sign-up.html" class="dropdown-item">Sign up</a>
                                                <a href="../forgot-password.html" class="dropdown-item">Forgot
                                                    password</a>
                                                <a href="../terms-of-service.html" class="dropdown-item">Terms of
                                                    service</a>
                                                <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
                                            </div>
                                        </div>
                                        <div class="dropend">
                                            <a class="dropdown-item dropdown-toggle" href="#sidebar-error"
                                               data-bs-toggle="dropdown" role="button" aria-expanded="false">
                                                Error pages
                                            </a>
                                            <div class="dropdown-menu">
                                                <a href="../error-404.html" class="dropdown-item">404 page</a>
                                                <a href="../error-500.html" class="dropdown-item">500 page</a>
                                                <a href="../error-maintenance.html" class="dropdown-item">Maintenance
                                                    page</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../form-elements.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6"/><path
                            d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Form elements
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><path
                            d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Extra
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="../activity.html">
                                    Activity
                                </a>
                                <a class="dropdown-item" href="../gallery.html">
                                    Gallery
                                </a>
                                <a class="dropdown-item" href="../invoice.html">
                                    Invoice
                                </a>
                                <a class="dropdown-item" href="../search-results.html">
                                    Search results
                                </a>
                                <a class="dropdown-item" href="../pricing.html">
                                    Pricing cards
                                </a>
                                <a class="dropdown-item" href="../users.html">
                                    Users
                                </a>
                                <a class="dropdown-item" href="../license.html">
                                    License
                                </a>
                                <a class="dropdown-item" href="../music.html">
                                    Music
                                </a>
                                <a class="dropdown-item" href="../widgets.html">
                                    Widgets
                                </a>
                                <a class="dropdown-item" href="../wizard.html">
                                    Wizard
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2"/><rect
                            x="4" y="13" width="6" height="7" rx="2"/><rect x="14" y="4" width="6" height="7" rx="2"/><rect
                            x="14" y="15" width="6" height="5" rx="2"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Layout
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../layout-horizontal.html">
                                            Horizontal
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical.html">
                                            Vertical
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical-transparent.html">
                                            Vertical transparent
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical-right.html">
                                            Right vertical
                                        </a>
                                        <a class="dropdown-item" href="../layout-condensed.html">
                                            Condensed
                                        </a>
                                        <a class="dropdown-item" href="../layout-condensed-dark.html">
                                            Condensed dark
                                        </a>
                                        <a class="dropdown-item" href="../layout-combo.html">
                                            Combined
                                        </a>
                                    </div>
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../layout-navbar-dark.html">
                                            Navbar dark
                                        </a>
                                        <a class="dropdown-item" href="../layout-navbar-sticky.html">
                                            Navbar sticky
                                        </a>
                                        <a class="dropdown-item" href="../layout-navbar-overlap.html">
                                            Navbar overlap
                                        </a>
                                        <a class="dropdown-item" href="../layout-dark.html">
                                            Dark mode
                                        </a>
                                        <a class="dropdown-item" href="../layout-rtl.html">
                                            RTL mode
                                        </a>
                                        <a class="dropdown-item" href="../layout-fluid.html">
                                            Fluid
                                        </a>
                                        <a class="dropdown-item" href="../layout-fluid-vertical.html">
                                            Fluid vertical
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="../docs/index.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path
                            d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><line x1="9"
                                                                                                              y1="9"
                                                                                                              x2="10"
                                                                                                              y2="9"/><line
                            x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Documentation
                    </span>
                            </a>
                        </li>
                    </ul>
                    <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                        <form action="." method="get">
                            <div class="input-icon">
                    <span class="input-icon-addon">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                           stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                           stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10"
                                                                                                              cy="10"
                                                                                                              r="7"/><line
                              x1="21" y1="21" x2="15" y2="15"/></svg>
                    </span>
                                <input type="text" class="form-control" placeholder="Search…"
                                       aria-label="Search in website">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-xl">
            <!-- Page title -->
            <div class="page-header d-print-none">
                <div class="row align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            Documentation
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="d-none d-lg-block col-lg-3">
                    <ul class="nav nav-vertical">
                        <li class="nav-item">
                            <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M8 9l3 3l-3 3"/><line x1="13" y1="15" x2="16" y2="15"/><rect x="4" y="4" width="16"
                                                                                            height="16" rx="4"/></svg>
                    </span>
                                Getting started
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-base">
                                <li class="nav-item">
                                    <a href="../docs/index.html" class="nav-link">
                                        Introduction
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/usage.html" class="nav-link">
                                        Usage
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/colors.html" class="nav-link">
                                        Colors
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/typography.html" class="nav-link">
                                        Typography
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/icons.html" class="nav-link">
                                        Icons
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"/></svg>
                    </span>
                                Components
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse show" id="menu-components">
                                <li class="nav-item">
                                    <a href="../docs/alerts.html" class="nav-link">
                                        Alerts
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/avatars.html" class="nav-link">
                                        Avatars
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/badges.html" class="nav-link">
                                        Badges
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/breadcrumb.html" class="nav-link">
                                        Breadcrumb
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/buttons.html" class="nav-link">
                                        Buttons
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/cards.html" class="nav-link active">
                                        Cards
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/carousel.html" class="nav-link">
                                        Carousel
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/dropdowns.html" class="nav-link">
                                        Dropdowns
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/divider.html" class="nav-link">
                                        Divider
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/empty.html" class="nav-link">
                                        Empty states
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/form-elements.html" class="nav-link">
                                        Form elements
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/form-helpers.html" class="nav-link">
                                        Form helpers
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/modals.html" class="nav-link">
                                        Modals
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/page-headers.html" class="nav-link">
                                        Page headers
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/progress.html" class="nav-link">
                                        Progress
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/range-slider.html" class="nav-link">
                                        Range slider
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/ribbons.html" class="nav-link">
                                        Ribbons
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/skeleton.html" class="nav-link">
                                        Skeleton
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/spinners.html" class="nav-link">
                                        Spinners
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/steps.html" class="nav-link">
                                        Steps
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/switch-icon.html" class="nav-link">
                                        Switch icon
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tables.html" class="nav-link">
                                        Tables
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tabs.html" class="nav-link">
                                        Tabs
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/timelines.html" class="nav-link">
                                        Timelines
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/toasts.html" class="nav-link">
                                        Toasts
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tooltips.html" class="nav-link">
                                        Tooltips
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z"/></svg>
                    </span>
                                Utilities
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-utils">
                                <li class="nav-item">
                                    <a href="../docs/cursors.html" class="nav-link">
                                        Cursors
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><rect x="4" y="4"
                                                                                                      width="6"
                                                                                                      height="6"
                                                                                                      rx="1"/><rect
                            x="4" y="14" width="6" height="6" rx="1"/><rect x="14" y="14" width="6" height="6" rx="1"/><line
                            x1="14" y1="7" x2="20" y2="7"/><line x1="17" y1="4" x2="17" y2="10"/></svg>
                    </span>
                                Plugins
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-plugins">
                                <li class="nav-item">
                                    <a href="../docs/autosize.html" class="nav-link">
                                        Autosize
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/input-mask.html" class="nav-link">
                                        Form input mask
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/flags.html" class="nav-link">
                                        Flags
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/payments.html" class="nav-link">
                                        Payments
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/charts.html" class="nav-link">
                                        Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="../changelog.html" class="nav-link">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><circle cx="7" cy="18"
                                                                                                        r="2"/><circle
                            cx="7" cy="6" r="2"/><circle cx="17" cy="6" r="2"/><line x1="7" y1="8" x2="7" y2="16"/><path
                            d="M9 18h6a2 2 0 0 0 2 -2v-5"/><polyline points="14 14 17 11 20 14"/></svg>
                    </span>
                                Changelog
                                <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.22</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9">
                    <div class="card card-lg">
                        <div class="card-body">
                            <div class="markdown">
                                <div>
                                    <div class="d-flex mb-4">
                                        <h1 class="mt-0">Cards</h1>
                                        <p class="ms-auto">
                                            <a href="https://getbootstrap.com/docs/4.4/components/card/"
                                               target="_blank">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue"
                                                     width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5"/>
                                                    <line x1="10" y1="14" x2="20" y2="4"/>
                                                    <polyline points="15 4 20 4 20 9"/>
                                                </svg>
                                                Bootstrap documentation
                                            </a>
                                        </p>
                                    </div>
                                    <p>Cards are flexible user interface elements, which help organize content into
                                        meaningful sections and make it easier to display on different screen sizes.
                                        Cards contain various smaller components, such as images, text, links and
                                        buttons and may act as an entry to more detailed information, helping users scan
                                        the page quickly and find the most relevant content.</p>
                                </div>
                                <h2 id="default-card">Default card</h2>
                                <p>Use the <code class="language-plaintext highlighter-rouge">.card</code> and <code
                                        class="language-plaintext highlighter-rouge">.card-body</code> classes to create
                                    a card and use it as the basis for a more advanced card design. A card is a perfect
                                    way to organize content and make it look neat and tidy.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-1">
                                            <div class="card">
                                                <div class="card-body">
                                                    <p>This is some text within a card body.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="card-padding">Card padding</h2>
                                <p>You can change the padding of a newly created card. To do it, use the <code
                                        class="language-plaintext highlighter-rouge">.card-sm</code>, <code
                                        class="language-plaintext highlighter-rouge">.card-md</code> or <code
                                        class="language-plaintext highlighter-rouge">.card-lg</code> classes.</p>
                                <p>Cards with the <code class="language-plaintext highlighter-rouge">.card-sm</code>
                                    class are well suited for small items such as widgets, etc., while the <code
                                            class="language-plaintext highlighter-rouge">.card-lg</code> class can be
                                    used for large blocks of text. Padding will be automatically reduced on small
                                    devices, to fit the screen size.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-2">
                                            <div class="space-y">
                                                <div class="card card-sm">
                                                    <div class="card-body">
                                                        <p>This is some text within a card body.</p>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <p>This is some text within a card body.</p>
                                                    </div>
                                                </div>
                                                <div class="card card-md">
                                                    <div class="card-body">
                                                        <p>This is some text within a card body.</p>
                                                    </div>
                                                </div>
                                                <div class="card card-lg">
                                                    <div class="card-body">
                                                        <p>This is some text within a card body.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card card-sm"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-md"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-lg"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="card-with-title">Card with title</h2>
                                <p>Add a title to your card by including the <code
                                        class="language-plaintext highlighter-rouge">.card-title</code> class within
                                    <code class="language-plaintext highlighter-rouge">.card-body</code>. You can also
                                    place the title inside the <code class="language-plaintext highlighter-rouge">.card-header</code>
                                    element to separate the title from the content with a horizontal line.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-1">
                                            <div class="space-y">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h3 class="card-title">Card title</h3>
                                                        <p>This is some text within a card body.</p>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h3 class="card-title">Card title</h3>
                                                    </div>
                                                    <div class="card-body">
                                                        <p>This is some text within a card body.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span
                                    class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span
                                    class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="card-with-title-and-image">Card with title and image</h2>
                                <p>To create a more visually appealing card, add a title and an image. Thanks to that,
                                    the card will go well with your inteface design and draw users’ attention.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-1">
                                            <div class="card">
                                                <div class="card-img-top img-responsive img-responsive-16by9"
                                                     style="background-image: url(../static/photos/9f36332564ca271d.jpg)"></div>
                                                <div class="card-body">
                                                    <h3 class="card-title">Card with title and image</h3>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
                                                        deleniti fugit incidunt, iste, itaque minima
                                                        neque pariatur perferendis sed suscipit velit vitae
                                                        voluptatem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-img-top img-responsive img-responsive-16by9"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with title and image<span
                                    class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
      neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="blog-post-card">Blog post card</h2>
                                <p>Add an image to your blog post card to make it eye-catching. You can do it by adding
                                    the image in the <code
                                            class="language-plaintext highlighter-rouge">.card-img-top</code> class.
                                    Thanks to the <code class="language-plaintext highlighter-rouge">.d-flex</code> and
                                    <code class="language-plaintext highlighter-rouge">.flex-column</code> classes
                                    within <code class="language-plaintext highlighter-rouge">.card-body</code>, the
                                    author details will be displayed at the bottom of the card.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-1">
                                            <div class="card d-flex flex-column">
                                                <a href="javascript:void(0)">
                                                    <img class="card-img-top"
                                                         src="../static/photos/36e273986ed577b8.jpg"
                                                         alt="How do you know she is a witch?"/>
                                                </a>
                                                <div class="card-body d-flex flex-column">
                                                    <h3 class="card-title"><a href="javascript:void(0)">How do you know
                                                        she is a witch?</a></h3>
                                                    <div class="text-muted">Are you suggesting that coconuts migrate?
                                                        No, no, no! Yes, yes. A bit. But she's got a wart. You ...
                                                    </div>
                                                    <div class="d-flex align-items-center pt-4 mt-auto">
                                                        <span class="avatar"
                                                              style="background-image: url(../static/avatars/000f.jpg)"></span>
                                                        <div class="ms-3">
                                                            <a href="../profile.html" class="text-body">Maryjo
                                                                Lebarree</a>
                                                            <div class="text-muted">3 days ago</div>
                                                        </div>
                                                        <div class="ms-auto">
                                                            <a href="javascript:void(0)"
                                                               class="icon d-none d-md-inline-block ms-3 text-muted">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                                     width="24" height="24" viewBox="0 0 24 24"
                                                                     stroke-width="2" stroke="currentColor" fill="none"
                                                                     stroke-linecap="round" stroke-linejoin="round">
                                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                                    <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card d-flex flex-column"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span
                                    class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span
                                    class="s">"How do you know she is a witch?"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;&lt;a</span> <span
                                    class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>How do you know she is a witch?<span
                                    class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...<span
                                    class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span
                                    class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"text-body"</span><span
                                    class="nt">&gt;</span>Maryjo Lebarree<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-auto"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"icon d-none d-md-inline-block ms-3 text-muted"</span><span
                                    class="nt">&gt;</span>
          <span class="c">&lt;!-- SVG icon code --&gt;</span>
        <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="row-deck">Row deck</h2>
                                <p>Add the <code class="language-plaintext highlighter-rouge">.row-deck</code> class to
                                    <code class="language-plaintext highlighter-rouge">.row</code>, if you want to
                                    display several cards next to one another. Thanks to that, they will all have the
                                    same height.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-2">
                                            <div class="row row-deck">
                                                <div class="col-md-4">
                                                    <div class="card">
                                                        <div class="card-body">Short content</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card">
                                                        <div class="card-body">Extra long content of card. Lorem ipsum
                                                            dolor sit amet, consetetur sadipscing elitr
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card">
                                                        <div class="card-body">Short content</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"row row-deck"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span
                                    class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr<span
                                    class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span
                                    class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="post-card-with-aside-image">Post card with aside image</h2>
                                <p>You can also add an image on the left side of the card. To do it, add the <code
                                        class="language-plaintext highlighter-rouge">.card-aside</code> class to the
                                    element with the <code class="language-plaintext highlighter-rouge">.card</code>
                                    class. Then add the image in the <code class="language-plaintext highlighter-rouge">.card-aside-column</code>
                                    element and it will be automatically centered and scaled to the right size.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-2">
                                            <div class="card d-flex flex-column">
                                                <div class="row row-0 flex-fill">
                                                    <div class="col-md-3">
                                                        <a href="javascript:void(0)">
                                                            <img src="../static/photos/75b555b99d5b38c4.jpg"
                                                                 class="w-100 h-100 object-cover"
                                                                 alt="Card side image"/>
                                                        </a>
                                                    </div>
                                                    <div class="col">
                                                        <div class="card-body">
                                                            <h3 class="card-title"><a href="javascript:void(0)">Shut
                                                                up!</a></h3>
                                                            <div class="text-muted">Burn her! How do you know she is a
                                                                witch? You don't frighten us, English pig-dogs! Go and
                                                                boil yo...
                                                            </div>
                                                            <div class="d-flex align-items-center pt-4 mt-auto">
                                                                <span class="avatar"
                                                                      style="background-image: url(../static/avatars/001f.jpg)"></span>
                                                                <div class="ms-3">
                                                                    <a href="../profile.html" class="text-body">Egan
                                                                        Poetz</a>
                                                                    <div class="text-muted">3 days ago</div>
                                                                </div>
                                                                <div class="ms-auto">
                                                                    <a href="javascript:void(0)"
                                                                       class="icon d-none d-md-inline-block ms-3 text-red">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                             class="icon" width="24" height="24"
                                                                             viewBox="0 0 24 24" stroke-width="2"
                                                                             stroke="currentColor" fill="none"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round">
                                                                            <path stroke="none" d="M0 0h24v24H0z"
                                                                                  fill="none"/>
                                                                            <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"/>
                                                                        </svg>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card d-flex flex-column"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-0 flex-fill"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span
                                    class="na">alt=</span><span class="s">"Card side image"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;&lt;a</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>Shut up!<span class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...<span
                                    class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                    class="s">"text-body"</span><span class="nt">&gt;</span>Egan Poetz<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-auto"</span><span
                                    class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                    class="s">"icon d-none d-md-inline-block ms-3 text-red"</span><span
                                    class="nt">&gt;</span>
              <span class="c">&lt;!-- SVG icon code --&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="color-variations">Color variations</h2>
                                <p>Add a status color to your card, either at the top or on the side of the card, to
                                    customise it and make it more eye-catching.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-2">
                                            <div class="row row-deck">
                                                <div class="col-md-6">
                                                    <div class="card">
                                                        <div class="card-status-top bg-danger"></div>
                                                        <div class="card-body">
                                                            <h3 class="card-title">Card with top status</h3>
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                                Aperiam deleniti fugit incidunt, iste, itaque minima
                                                                neque pariatur perferendis sed suscipit velit vitae
                                                                voluptatem.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="card">
                                                        <div class="card-status-start bg-green"></div>
                                                        <div class="card-body">
                                                            <h3 class="card-title">Card with side status</h3>
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                                Aperiam deleniti fugit incidunt, iste, itaque minima
                                                                neque pariatur perferendis sed suscipit velit vitae
                                                                voluptatem.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"row row-deck"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"card-status-top bg-danger"</span><span class="nt">&gt;&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;</span>Card with top status<span class="nt">&lt;/h3&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
          neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"card-status-start bg-green"</span><span
                                    class="nt">&gt;&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;</span>Card with side status<span class="nt">&lt;/h3&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
          neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="stacked-card">Stacked card</h2>
                                <p>Use the <code class="language-plaintext highlighter-rouge">card-stacked</code> class
                                    to stack up multiple cards, if you want to save screen space or create a visually
                                    appealing effect.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-1">
                                            <div class="card card-stacked">
                                                <div class="card-body">
                                                    <h3 class="card-title">Stacked card</h3>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
                                                        deleniti fugit incidunt, iste, itaque minima
                                                        neque pariatur perferendis sed suscipit velit vitae
                                                        voluptatem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"card card-stacked"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Stacked card<span
                                    class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
      neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="tabbed-card">Tabbed card</h2>
                                <p>Organize multiple cards into tabs to be able to display more content in a
                                    well-organized way and allow users to alternate between them easily.</p>
                                <div class="example no_toc_section example-bg">
                                    <div class="example-content">
                                        <div class="example-column example-column-2">
                                            <!-- Cards with tabs component -->
                                            <div class="card-tabs ">
                                                <!-- Cards navigation -->
                                                <ul class="nav nav-tabs">
                                                    <li class="nav-item"><a href="#tab-top-1" class="nav-link active"
                                                                            data-bs-toggle="tab">Tab 1</a></li>
                                                    <li class="nav-item"><a href="#tab-top-2" class="nav-link"
                                                                            data-bs-toggle="tab">Tab 2</a></li>
                                                    <li class="nav-item"><a href="#tab-top-3" class="nav-link"
                                                                            data-bs-toggle="tab">Tab 3</a></li>
                                                    <li class="nav-item"><a href="#tab-top-4" class="nav-link"
                                                                            data-bs-toggle="tab">Tab 4</a></li>
                                                </ul>
                                                <div class="tab-content">
                                                    <!-- Content of card #1 -->
                                                    <div id="tab-top-1" class="card tab-pane active show">
                                                        <div class="card-body">
                                                            <div class="card-title">Content of tab #1</div>
                                                            <p>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                                                elit. Adipisci, alias aliquid distinctio dolorem
                                                                expedita, fugiat hic magni molestiae molestias odit.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- Content of card #2 -->
                                                    <div id="tab-top-2" class="card tab-pane">
                                                        <div class="card-body">
                                                            <div class="card-title">Content of tab #2</div>
                                                            <p>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                                                elit. Adipisci, alias aliquid distinctio dolorem
                                                                expedita, fugiat hic magni molestiae molestias odit.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- Content of card #3 -->
                                                    <div id="tab-top-3" class="card tab-pane">
                                                        <div class="card-body">
                                                            <div class="card-title">Content of tab #3</div>
                                                            <p>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                                                elit. Adipisci, alias aliquid distinctio dolorem
                                                                expedita, fugiat hic magni molestiae molestias odit.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- Content of card #4 -->
                                                    <div id="tab-top-4" class="card tab-pane">
                                                        <div class="card-body">
                                                            <div class="card-title">Content of tab #4</div>
                                                            <p>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                                                elit. Adipisci, alias aliquid distinctio dolorem
                                                                expedita, fugiat hic magni molestiae molestias odit.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs "</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- Cards navigation --&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span
                                    class="na">href=</span><span class="s">"#tab-top-1"</span> <span
                                    class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span
                                    class="na">href=</span><span class="s">"#tab-top-2"</span> <span
                                    class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span
                                    class="na">href=</span><span class="s">"#tab-top-3"</span> <span
                                    class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span
                                    class="na">href=</span><span class="s">"#tab-top-4"</span> <span
                                    class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- Content of card #1 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-1"</span> <span class="na">class=</span><span
                                    class="s">"card tab-pane active show"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;</span>Content of tab #1<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content of card #2 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-2"</span> <span class="na">class=</span><span
                                    class="s">"card tab-pane"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;</span>Content of tab #2<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content of card #3 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-3"</span> <span class="na">class=</span><span
                                    class="s">"card tab-pane"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;</span>Content of tab #3<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content of card #4 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-4"</span> <span class="na">class=</span><span
                                    class="s">"card tab-pane"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span
                                    class="nt">&gt;</span>Content of tab #4<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
            <div class="container">
                <div class="row text-center align-items-center flex-row-reverse">
                    <div class="col-lg-auto ms-lg-auto">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a>
                            </li>
                            <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a>
                            </li>
                            <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank"
                                                            class="link-secondary" rel="noopener">Source code</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item">
                                Copyright &copy; 2021
                                <a href=".." class="link-secondary">Tabler</a>.
                                All rights reserved.
                            </li>
                            <li class="list-inline-item">
                                <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.22</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
</body>
</html>
